<template>
  <div class="category">
    <!-- 搜索框 -->
    <van-sticky class="container">
        <van-search
          v-model="value"
          shape="round"
          background="#F8F8F8"
          placeholder="请输入搜索关键词"
          class="search"
        >
          <template #left-icon>
            <van-icon name="search" class="icon-search" />
          </template>
        </van-search>
        <van-divider class="line" />
    </van-sticky>
    <div class="sidebar">
      <ul class="one">
        <li
          v-for="item in list"
          :key="item.id"
          @click="updata(item)"
          :class="falg == item.id ? 'active' : ''"
        >
          <p :class="falg == item.id ? 'active' : ''">
            {{ item.name }}
          </p>
        </li>
      </ul>
      <div class="two">
        <div class="banner">
          <img :src="src" alt="" />
        </div>
        <div class="banner-title">
          <p>{{ title }}分类</p>
          <div></div>
        </div>
        <div class="goods">
          <div v-for="good in twoList" :key="good.id" class="good-list">
            <img
              :src="good.wap_banner_url"
              alt=""
              class="good-img"
              @click="gotopic(good.id)"
            />
            <p>{{ good.name }}</p>
          </div>
        </div>
    </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { category, currentaction } from '@/api/category'
const active = ref(0)
const list = ref([])
const twoList = ref([])
const id = ref('')
const src = ref('')
const value = ref('')
const falg = ref('')
const title = ref('')
const router = useRouter()
// 一级导航获取
category().then(res => {
  list.value = res.categoryList
  // 二级导航获取
  src.value = list.value[active.value].banner_url
  title.value = list.value[active.value].name
  id.value = list.value[active.value].id
  console.log(list.value[active.value].name)
  updata({ id: id.value, banner_url: src.value, name: title.value })
})
// 方法
const updata = (obj) => {
  currentaction({ id: obj.id }).then(res => {
    twoList.value = res.data.currentOne.subList
    src.value = obj.banner_url
    id.value = obj.id
    falg.value = obj.id
    title.value = obj.name
  })
}

const gotopic = (id) => {
  console.log(id)
  router.push({ name: 'secCategory', params: { id: id } })
}
</script>
<script>
export default {
  name: 'categoryView'
}
</script>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.icon-search {
  margin-left: 27px;
}
.category {
  background-color: #ffffff;
  .container{
    background-color: #fff;
    width: 100%;
    z-index: 9999;
    position: fixed;
      .search {
        width: 710px;
        margin: 8px auto 40px;
        border-radius: 50%;
        background-color: #fff;
      }
  }

  .sidebar {
    width: 750px;
    display: flex;
    height: 1440px;
    justify-content: flex-start;
    overflow: hidden;
    background-color: #F8F8F8;
    .one {
        margin-top: 115px;
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
      overflow: hidden;
      background-color: #ffffff;
      li {
        width: 60px;
        margin: 60px 48px 0 56px;
        height: 42px;
        overflow: hidden;
        p {
          width: 60px;
          font-size: 30px;
          color: #333333;
          letter-spacing: 0;
          font-weight: 400;
          height: 42px;
          line-height: 42px;
        }
      }
      .active {
        color: #cea62a;
      }
    }
    .two {

      width: 546px;
      margin: 20px 20px 0;
      height: 1420px;
      margin-top: 115px;
      text-align: center;
      .banner {
        img {
          width: 546px;
          height: 218px;
          margin-top: 20px;
        }
      }
      .banner-title {
        height: 42px;
        margin: 70px auto 20px;
        position: relative;
        p {
          font-size: 30px;
          color: #333333;
          letter-spacing: 0;
          font-weight: 500;
          position: relative;
          z-index: 3;
        }
        div {
          position: absolute;
          background-color: #b7a673;
          height: 20px;
          width: 120px;
          top: 22px;
          left: 50%;
          transform: translate(-50%);
          z-index: 1;
        }
      }
      .goods {
        display: flex;
        flex-wrap: wrap;
        .good-list {
          width: 182px;
          .good-img {
            width: 140px;
            height: 140px;
          }
          p {
            font-size: 24px;
            color: #333333;
            letter-spacing: 0;
            font-weight: 500;
          }
        }

      }
    }
  }
}
</style>
